#事件分析
<template>
  <div id="event">
    <div class="box">
      <div id="eventList">
        <div
          v-for="(item, index) in eventList"
          :key="index"
          :class="{choosed: eventNum === index}"
          class="event"
          @click="chooseEvent(item, index)"
        >
          <span class="num">{{ item.num }}</span>
          <span class="type">{{ item.type }}</span>
        </div>
      </div>
      <div id="genreList" :class="{show: showStandardEcg === false}" class="genreList">
        <div v-for="(item, index) in 18" :key="index" class="genre">
          <div :id="'genre' + index" :class="{choosed: choosedList.includes(index)}" @click="chooseGenre(index)" ></div>
          <img v-if="choosedList.includes(index)" src="./../../../assets/resource/ecg/check-square.png" alt="" class="img">
        </div>
      </div>
    </div>
    <div class="btnGroup">
      <div>
        <span class="name">排序</span>
        <el-select v-model="eventValue" placeholder="请选择">
          <el-option
            v-for="item in eventOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <span class="name">通道</span>
        <span class="optionValue">{{ options[radio].label }}</span>
        <el-button size="small" style="margin-right: 10px;" @click="dialogVisible = true">选择导联</el-button>
        <el-button size="small">典型图</el-button>
        <el-button size="small">保存片段图</el-button>
      </div>
      <div class="b-right">
        <el-button size="small">保存</el-button>
        <el-button size="small" @click="selectAll">全选</el-button>
        <el-button size="small">页选</el-button>
        <el-button size="small" @click="selectInvert">反选</el-button>
        <el-button size="small" @click="cleanUp">清空</el-button>
      </div>
    </div>
    <div v-if="showStandardEcg" class="top">
      <ecg-chart 
        ref = "ecgChart"
        :width-value="ecgWidthValue" 
        :height-value="ecgHeightValue"
      ></ecg-chart>
    </div>
    <div v-if="showStandardEcg" class="btnGroup">
      <div class="b-left">
        <div>
          <img
            src="./../../../assets/resource/ecg/step-backward.png"
            alt
            title="最前"
            class="littleBtn"
          />
          <img
            src="./../../../assets/resource/ecg/caret-left.png"
            alt
            title="前一页"
            class="littleBtn"
          />
          <img
            src="./../../../assets/resource/ecg/caret-left.png"
            alt
            title="前一秒"
            class="littleBtn"
          />
          <img
            src="./../../../assets/resource/ecg/caret-right.png"
            alt
            title="后一秒"
            class="littleBtn"
          />
          <img
            src="./../../../assets/resource/ecg/caret-right.png"
            alt
            title="后一页"
            class="littleBtn"
          />
          <img
            src="./../../../assets/resource/ecg/step-forward.png"
            alt
            title="最后"
            class="littleBtn"
          />
        </div>
        <el-button size="small">转到</el-button>
        <el-button size="small">基线上移</el-button>
        <el-button size="small">基线下移</el-button>
      </div>
      <div class="b-right">
        <el-button size="small" @click="hideStandardEcg">隐藏</el-button>
      </div>
    </div>
    <div v-if="!showStandardEcg">
      <el-button size="small" class="fullBtn" @click="toShowStandardEcg">点击此处显示标准心电图</el-button>
    </div>
    <el-dialog :visible.sync="dialogVisible" :before-close="handleClose" title="选择导联" width="560px">
      <div class="five copy">
        <el-radio-group v-model="radio" class="leadList">
          <el-radio
            v-for="(item, index) in options"
            :label="item.value"
            :key="index"
            class="item"
          >{{ item.label }}</el-radio>
        </el-radio-group>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import EcgChart from '@/components/ecgChart'
import Papa from 'papaparse'
import * as samplesData from './../../../../public/js/ss'
var Highcharts = require('highcharts')

export default {
  components: {
    EcgChart
  },
  data() {
    return {
      ecgWidthValue: undefined,
      ecgHeightValue: undefined,
      choosedList: [],
      eventList: [
        {
          num: 10026,
          type: '单发室早'
        },
        {
          num: 3,
          type: '室速'
        },
        {
          num: 10,
          type: '室早成对'
        },
        {
          num: 10,
          type: '室早二联律'
        },
        {
          num: 174,
          type: '室早三联律'
        },
        {
          num: 0,
          type: '室早四联律'
        },
        {
          num: 28,
          type: '单发上室早'
        },
        {
          num: 1,
          type: '室上速'
        },
        {
          num: 6,
          type: '室上早成对'
        },
        {
          num: 0,
          type: '室上早二联律'
        },
        {
          num: 0,
          type: '室上早三联律'
        },
        {
          num: 0,
          type: '室上早四联律'
        },
        {
          num: 0,
          type: '心动过缓'
        },
        {
          num: 16,
          type: '心动过速'
        },
        {
          num: 1,
          type: '最快心率'
        },
        {
          num: 1,
          type: '最慢心率'
        },
        {
          num: 0,
          type: '停搏'
        },
        {
          num: 1,
          type: '长间期'
        },
        {
          num: 5,
          type: '房颤'
        },
        {
          num: 0,
          type: '房扑'
        },
        {
          num: 0,
          type: 'RonT'
        },
        {
          num: 6,
          type: '干扰段'
        },
        {
          num: 0,
          type: '按钮事件'
        },
        {
          num: 0,
          type: '自定义事件'
        },
        {
          num: 0,
          type: '删除'
        }
      ],
      eventNum: 0,
      eventOptions: [
        {
          label: '发生时刻',
          value: 0
        },
        {
          label: '事件长度',
          value: 1
        },
        {
          label: '含心搏数',
          value: 2
        },
        {
          label: '平均心率',
          value: 3
        }
      ],
      eventValue: '发生时刻',
      showStandardEcg: true,
      options: [
        {
          label: 'I',
          value: 0
        },
        {
          label: 'II',
          value: 1
        },
        {
          label: 'III',
          value: 2
        },
        {
          label: 'aVR',
          value: 3
        },
        {
          label: 'aVL',
          value: 4
        },
        {
          label: 'aVF',
          value: 5
        },
        {
          label: 'V1',
          value: 6
        },
        {
          label: 'V2',
          value: 7
        },
        {
          label: 'V3',
          value: 8
        },
        {
          label: 'V4',
          value: 9
        },
        {
          label: 'V5',
          value: 10
        },
        {
          label: 'V6',
          value: 11
        }
      ],
      value: '',
      checkAll: false,
      isIndeterminate: true,

      checked: true,
      dialogVisible: false,
      checkList: ['I'],
      radio: '0',

      list: [],
      list1: [],
      list2: [],
      list2Value: 4,
      scaleValue: 16,
      ecgList: [
        {
          time: '10:48:41',
          name: 'aVF',
          data: this.list
        },
        {
          time: '10:48:55',
          name: 'aVF',
          data: this.list
        },
        {
          time: '10:49:09',
          name: 'aVF',
          data: this.list
        }
      ],
      fecg_data: [],
      chart: undefined,
      genre: []
    }
  },
  created() {
    this.getData()
    this.$nextTick(() => {
      this.ecgWidthValue = window.innerWidth - 10
      for (let i = 0; i < 18; i++) {
        this.createGenreChart(i)
      }
    })
  },
  methods: {
    chooseGenre(index) {
      const result = this.choosedList.indexOf(index)
      if (result === -1) {
        this.choosedList.push(index)
      } else {
        this.choosedList.splice(result, 1)
      }
      console.log(this.choosedList)
    },
    selectAll() {
      const result = []
      for (let i = 0; i < 18; i++) {
        result.push(i)
      }
      this.choosedList = result
    },
    selectInvert() {
      const result = []
      for (let i = 0; i < 18; i++) {
        result.push(i)
      }
      this.choosedList.forEach(item => {
        result.forEach((ele, index) => {
          if (ele === item) {
            result.splice(index, 1)
          }
        })
      })
      this.choosedList = result
    },
    cleanUp() {
      this.choosedList = []
    },
    chooseEvent(item, index) {
      this.eventNum = index
    },
    toShowStandardEcg() {
      this.showStandardEcg = true
      const chartWidth =
        document.querySelector('#genreList').offsetWidth * 0.166 - 2
      const chartHeight = (window.innerHeight - 240) * 0.55 * 0.166
      for (let i = 0; i < 18; i++) {
        this.genre[i].setSize(chartWidth, chartHeight)
      }
      this.$nextTick(() => {
        this.$refs.ecgChart.chartBox()
      })
    },
    hideStandardEcg() {
      this.showStandardEcg = false
      const chartWidth =
        document.querySelector('#genreList').offsetWidth * 0.166 - 2
      const chartHeight = (window.innerHeight - 240) / 6
      for (let i = 0; i < 18; i++) {
        this.genre[i].setSize(chartWidth, chartHeight)
      }
    },
    handleClick(tab, event) {
      console.log(tab, event)
    },
    handleCheckAllChange(val) {
      const result = this.options.map(item => {
        return item.label
      })
      this.checkList = val ? result : []
      this.isIndeterminate = false
    },
    getData() {
      // debugger
      const data = Papa.parse(samplesData.samplesData).data
      var fecg_data = []
      for (var i = 2; i < data.length - 1; i++) {
        var item = data[i]
        var arr = []
        arr[0] = item[0].substring(0)
        arr[1] = item[1].substring(0)
        fecg_data[i] = arr
      }

      for (let k = 4; k < fecg_data.length - 1; k++) {
        var time = fecg_data[k]
        var time1 = time[0].trim().substring(3)
        var new_time = time1.split('.')
        fecg_data[k][0] = parseInt(new_time[0]) * 1000 + parseInt(new_time[1])
        fecg_data[k][1] = Number(fecg_data[k][1])
      }
      // console.log(fecg_data)
      this.fecg_data = fecg_data
      this.list = fecg_data.slice(4, fecg_data.length - 2)
      this.list1 = fecg_data.slice(4, 600)
      this.list2 = fecg_data.slice(4, 20)
      this.list2Value = 4
    },
    createGenreChart(index) {
      const that = this
      const widthValue1 =
        document.querySelector('#genreList').offsetWidth * 0.5 - 2
      let heightValue
      if (this.showStandardEcg) {
        heightValue = window.innerHeight * 0.09
      } else {
        heightValue = (window.innerHeight - 240) / 6
      }
      require('highcharts/modules/data')(Highcharts)
      this.genre[index] = Highcharts.chart(`genre${index}`, {
        chart: {
          type: 'spline',
          width: widthValue1,
          height: heightValue,
          backgroundColor: '#E7F2FF'
        },
        credits: {
          enabled: false
        },
        title: {
          text: `10:12:06(1) 平均心率: 126   心搏数: 9`,
          align: 'left',
          floating: true,
          y: heightValue - 20,
          style: {
            fontSize: '14px',
            marginTop: '30px'
          }
        },
        subtitle: {
          enabled: false
        },
        yAxis: {
          labels: {
            enabled: false
          },
          tickPositions: [-1, -0.5, 0, 0.5, 1],
          title: {
            enabled: false
          },
          gridLineWidth: 0,
          max: 1
        },
        xAxis: {
          labels: {
            enabled: false
          },
          tickWidth: 0,
          lineWidth: 0,
          gridLineWidth: 0
        },
        legend: {
          enabled: false
        },
        series: [
          {
            name: 'I',
            turboThreshold: 200000,
            enableMouseTracking: false,
            marker: {
              enabled: false
            },
            data: (function() {
              const value = that.list1
              var data = []

              for (let i = 0; i < value.length - 1; i += 1) {
                data.push({
                  x: value[i][0],
                  y: value[i][1]
                })
              }
              return data
            })(),
            zoneAxis: 'x',
            zones: [
              {
                value: 100,
                color: '#7cb5ec'
              },
              {
                value: 300,
                color: '#ff0000'
                // dashStyle: 'dot'
              }
            ]
          }
        ]
      })
    },
    handleClose() {
      this.dialogVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
#event {
  width: 100%;
  .copy {
    border: 1px solid #c0c4cc;
    padding: 10px;
    border-radius: 6px;
    margin-bottom: 10px;
  }
  .box {
    display: flex;
    width: 100%;
    #eventList {
      width: 15%;

      padding: 20px;
      overflow-y: scroll;
      height: calc(55vh - 45px);
      .event {
        display: flex;
        .num {
          flex: 2;
        }
        .type {
          flex: 3;
        }
      }
      .choosed {
        background: #e7f2ff;
      }
    }
    .genreList {
      width: 85%;
      display: flex;
      align-content: baseline;
      flex-wrap: wrap;
      height: 55vh;
      overflow-y: scroll;
      .genre {
            flex: 0 0 calc(50% - 2px);
            width: calc(50% - 2px);
            border: 1px solid #979797;
            position: relative;
        }
        .choosed {
            border: 2px solid #2a00fa;
        }
        .img {
            position: absolute;
            z-index: 10;
            right: 0;
            top: 0;
            width: 24px;
            height: 24px;
        }
    }
    .show {
      height: 75vh;
    }
  }
  .btnGroup {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    border: 1px solid #979797;
    .optionValue {
      width: 60px;
      padding: 9px 15px;
      font-size: 12px;
      border-radius: 3px;
      display: inline-block;
      line-height: 1;
      white-space: nowrap;
      border: 1px solid #dcdfe6;
      color: #606266;
      -webkit-appearance: none;
      text-align: center;
      margin-right: 10px;
    }
    .b-left {
      display: flex;
      align-items: end;
    }
    .el-select {
      width: 120px;
      margin-right: 20px;
    }
    .name {
      margin-right: 10px;
    }
  }
  .fullBtn {
    width: 100%;
    padding: 10px;
    margin-top: 10px;
  }
  .littleBtn {
    width: 30px;
    height: 30px;
    border: 1px solid #979797;
    margin-right: 10px;
  }
  .el-dialog {
    .leadList {
      display: flex;
      flex-wrap: wrap;
      .item {
        width: 53px;
        margin-top: 10px;
      }
    }
    .five {
      .five-list-box {
        display: flex;
        flex-wrap: wrap;
        .five-list {
          margin-right: 10px;
          .name {
            font-size: 14px;
            color: #4a4a4a;
            text-align: left;
            width: 120px;
            display: inline-block;
          }
          .el-input {
            width: 100px;
          }
        }
      }
    }
    .list {
      margin-top: 10px;
      .name {
        font-size: 14px;
        color: #4a4a4a;
        text-align: left;
        width: 100px;
        display: inline-block;
      }
      .el-select {
        width: 115px;
      }
    }
  }
}
</style>



